{% extends "layout.html" %}
{% block content %}
<div class="container">
  <div style="margin-bottom:10px;" class="more clearfix">
    <a class="btn btn-success" href="/num/add/" target="_blank">
      <span class="glyphicon glyphicon-plus-sign" aria-hidden="true"></span>
      新建靓号
    </a>
    <div style="float:right;width: 300px;">
      <form method="get">
        <div class="input-group">
          <input type="text" class="form-control" name=q placeholder="search for" value="{{value}}">
          <span class="input-group-btn">
            <button class="btn btn-default" type="submit"><span class="glyphicon glyphicon-search"
                aria-hidden="true"></span></button>
          </span>
        </div><!-- /input-group -->
      </form>
    </div>

  </div>
  <div>
    <div class="bs-example" data-example-id="panel-without-body-with-table">
      <div class="panel panel-default">
        <!-- Default panel contents -->
        <div class="panel-heading">
          <span class="glyphicon glyphicon-th-list" aria-hidden="true"></span>
          靓号列表
        </div>
        <!-- Table -->
        <table class="table table-bordered">
          <thead>
            <tr>
              <th>ID</th>
              <th>号码</th>
              <th>價格</th>
              <th>級別</th>
              <th>狀態</th>
              <th>操作</th>
            </tr>
          </thead>
          <tbody>
            {%for obj in queryset%}
            <tr>
              <th scope="row">{{obj.id}}</th>
              <td>{{obj.mobile}}</td>
              <td>{{obj.price}}</td>
              <td>{{obj.get_level_display}}</td>
              <td>{{obj.get_status_display}}</td>


              <td>
                <!-- <a class="btn btn-primary btn-xs" href="/depart/edit/?nid={{obj.id}}">编辑</a> -->
                <a class="btn btn-primary btn-xs" href="/num/{{obj.id}}/edit/">编辑</a>
                <a class="btn btn-danger btn-xs" href="/num/delete/?nid={{obj.id}}">删除</a>
              </td>
            </tr>
            {%endfor%}
          </tbody>
        </table>
      </div>
    </div>


    <!-- 分页导航开始： 这部分内容基本不用改，传过来的统一要用queryset命名-->
    <div class="pagination" style="margin-top:1px ;">
      <span class="step-links">
        {% if queryset.has_previous %}
        <a href="?page=1">&laquo; 首页</a>
        <a href="?page={{ queryset.previous_page_number }}">上一页</a>
        {% endif %}

        <span class="current">
          第 {{ queryset.number }} 页 / 共 {{ paginator.num_pages }} 页
        </span>

        {% if queryset.has_next %}
        <a href="?page={{ queryset.next_page_number }}">下一页</a>
        <a href="?page={{ paginator.num_pages }}">末页 &raquo;</a>
        {% endif %}
      </span>

    <!-- 跳转输入框 -->
    <form method="get" style="display: inline-block; margin-left: 20px;">
      <input type="number" 
             name="page" 
             min="1" 
             max="{{ paginator.num_pages }}"
             value="{{ articles.number }}"
             style="width: 50px; padding: 4px;">
      <button type="submit">跳转</button>
  </form>

    </div>
    <!-- 分页导航结束-->


  </div>

</div>

{% endblock %}